<template>
  <div style="width:100%;height:100%;">
    <div class="dialog2Title">
      <div>
        缺陷周期修
        <el-date-picker
          v-model="year"
          :popper-append-to-body="false"
          popper-class="indexDialog2"
          value-format="yyyy"
          type="year"
          placeholder="选择年" />
      </div>
      <div>
        <div style="text-align: right;">
          <span class="dialog2Titleleft">{{ titleData.noDealTotalNum }}</span>
          /
          <span class="dialog2Titleright">{{ titleData.totalTotalNum }}</span>
        </div>
        <div class="dialog2bottom">未处理数量/总数量</div>
      </div>
    </div>
    <div class="dialog2Content">
      <div v-for="(item,index) in data" :key="index" class="dialog2Item">
        <div class="dialog2ItemOne">
          <span class="dialog2ItemOneLeft">{{ index + 1 }}月</span>
          <span
            v-if="item.increaseRate"
            class="dialog2ItemOneRight"
            :style="{ color: item.increaseRate.substring(0, 1) == '-' ? '#E04F11' : '#01B113' }">
            <i v-if="item.increaseRate.substring(0, 1) != '-'" class="el-icon-caret-top" />
            <i v-else class="el-icon-caret-bottom" />
            {{ item.increaseRate }}
          </span>
        </div>
        <div class="dialog2ItemTo" style="text-align: right;">
          <span class="dialog2ItemToLeft">{{ item.nodealnum }}</span>
          /
          <span class="dialog2ItemToRight">{{ item.totalnum }}</span>
        </div>
        <div class="dialog2ItemThree">未处理数量/总数量</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDefectCycle } from '@/api/cms/index/index.js'
export default {
  props: {

    railTypes: {
      type: String,
      default: ''
    },
    deptCode: {
      type: String,
      default: ''
    },
    deptId: {
      type: String,
      default: ''
    }

  },
  data() {
    const date = new Date()
    const year = date.getFullYear().toString()
    return {
      data: [],
      year: year,
      titleData: []
    }
  },
  watch: {
    year() {
      this.init()
    },
    deptId() {
      this.init()
    },
    railTypes() {
      this.init()
    },
    deptCode() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getDefectCycle({
        year: this.year,
        deptCode: this.deptCode,
        railTypeList: this.railTypes.split(','),
        deptId: this.deptId
      }).then(res => {
        this.titleData = res.data.splice(res.data.length - 1, 1)[0]
        this.data = res.data
        console.log(this.titleData)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog2Title {
  padding: 15px 20px;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
}
/deep/.el-date-editor {
  margin-left: 12px;
}
/deep/.el-date-editor .el-input__inner {
  width: 150px;
  height: 30px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  color: #ffffff;
}
/deep/.el-date-editor.el-input {
  width: 150px !important;
}
/deep/ .input__prefix,
/deep/.el-input__suffix {
  top: -3px;
}
.dialog2Titleleft {
  font-size: 22px;
  color: #ffdd65;
  line-height: 30px;
}
.dialog2Titleright {
  font-size: 22px;
  color: #ffffff;
  line-height: 30px;
}
.dialog2bottom {
  font-size: 14px;

  color: rgba(255, 255, 255, 0.6);
}
.dialog2Content {
  height: calc(100% - 84px);
  padding: 0 20px 20px 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dialog2Item {
  width: 32%;
  height: 22%;
  background: #1f3275;
  border-radius: 2px;
  margin-bottom: 15px;
  padding: 5px 10px;
}
.dialog2ItemOneLeft {
  font-weight: 500;
  font-size: 18px;

  color: #ffffff;
}
.dialog2ItemOne {
  display: flex;
  justify-content: space-between;
}
.dialog2ItemOneRight {
  font-size: 10px;
}
.dialog2ItemToLeft {
  font-size: 16px;
  color: #ffdd65;
}
.dialog2ItemToRight {
  font-size: 16px;
  color: #fff;
}
.dialog2ItemThree {
  font-size: 14px;
  text-align: right;

  color: rgba(255, 255, 255, 0.6);
}
/deep/ .el-input__prefix {
  top: -3px;
}
</style>
